<template>
  <div class="bg_view">
    <div class="cam_item" @click="goDemo1()">
      <div class="head">
        <div class="name">服药管家主页</div>
        <div class="btn">>去装药</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      depts: []
    };
  },
  created() {
    console.log("H:"+history.length)
    var c = window.localStorage.getItem("count");
    if (c == null || c == '') {
      window.localStorage.setItem("count", 0);
    } else {
      window.localStorage.setItem("count", parseInt(c) + 1);
    }
  },

//1、挂载完成后，判断浏览器是否支持popstate
  mounted() {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate', this.goBack, false);
    }
  },
//页面销毁时，取消监听。否则其他vue路由页面也会被监听
  destroyed() {
    window.removeEventListener('popstate', this.goBack, false);
  },
//3、将监听操作写在methods里面，removeEventListener取消监听内容必须跟开启监听保持一致，所以函数拿到methods里面写
  methods: {
    goBack() {
      console.log("go-back")
      // var c = window.localStorage.getItem("count");
      // c = parseInt(c)-1
      // console.log(c)
      // history.go(-c)
      // this.history.go(-window.localStorage.getItem("count"));
      this.$router.replace({path: '/demoIndex'});
      //replace替换原路由，作用是避免回退死循环
    },
    goDemo1() {
      this.$router.push({
        path: "/demo2"
      });
    }
  }
};
</script>
<style scoped>
.bg_view {
  height: 100%;
  min-height: 100vh;
  background-color: #f4f8fc;
}

.cam_item {
  background: #ffffff;
  box-shadow: 0px 0px 11px 0px rgba(173, 195, 228, 0.43);
  border-radius: 6px;
  margin: 1rem;
  margin: 0.75rem auto;
  width: calc(100% - 3.75rem);
  padding: 0 0.875rem;
}

.cam_item .head {
  height: 2.9375rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cam_item .head .name {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #131A2A;
}

.cam_item .head .btn {
  width: 4.6875rem;
  height: 1.75rem;
  background: linear-gradient(0deg, #448eff 0%, #66a3ff 100%);
  border-radius: 3px;
  text-align: center;
  line-height: 1.75rem;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 24px;
}

.cam_item .line {
  width: calc(100%);
  height: 0.0625rem;
  background-color: #e7ecf5;
}

.cam_item .address {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #a4adbe;
  line-height: 20px;
  padding: 0.75rem 0;
}
</style>
